<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    欢迎你，{{name}}<br>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="did" header-align="center" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="dname" header-align="center" align="center" label="优惠券名称">
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="优惠券类型">
      </el-table-column>
      <el-table-column prop="man" header-align="center" align="center" label="满额限制">
      </el-table-column>
      <el-table-column prop="zhe" header-align="center" align="center" label="折扣金额">
      </el-table-column>
      <el-table-column prop="bi" header-align="center" align="center" label="折扣比例">
      </el-table-column>
      <el-table-column prop="dateCount" header-align="center" align="center" label="有效天数">
      </el-table-column>
      <el-table-column prop="keYong" header-align="center" align="center" label="可用数量">
      </el-table-column>
      <el-table-column prop="yiLing" header-align="center" align="center" label="已领数量">
      </el-table-column>
      <el-table-column prop="yiYong" header-align="center" align="center" label="已使用数量">
      </el-table-column>
      <el-table-column prop="disType" header-align="center" align="center" label="优惠券">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addMydis(scope.row)">领取</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.did)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog :title="!dataForm.did ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
        label-width="80px">
        <el-form-item label="优惠券名" prop="dname">
          <el-input v-model="dataForm.dname" placeholder="优惠券名称"></el-input>
        </el-form-item>
        商品类型：
        <el-select v-model="dataForm.type" placeholder="请选择">
          <el-option v-for="item in types" :key="item" :label="item" :value="item">
          </el-option>
        </el-select><br>
        优惠券：
        <el-select v-model="dataForm.disType" placeholder="请选择">
          <el-option v-for="item in disTypes" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-form-item label="满额限制" prop="man">
          <el-input v-model="dataForm.man" placeholder="满额限制"></el-input>
        </el-form-item>
        <span v-if="dataForm.disType=='满减卷'">
          <el-form-item label="折扣金额" prop="zhe">
            <el-input v-model="dataForm.zhe" placeholder="折扣金额"></el-input>
          </el-form-item>
        </span>
        <span v-if="dataForm.disType=='折扣卷'">
          <el-form-item label="折扣比例" prop="bi">
            <el-input v-model="dataForm.bi" placeholder="折扣比例"></el-input>
          </el-form-item>
        </span>
        <el-form-item label="有效天数" prop="dateCount">
          <el-input v-model="dataForm.dateCount" placeholder="有效天数"></el-input>
        </el-form-item>
        <el-form-item label="可用数量" prop="keYong">
          <el-input v-model="dataForm.keYong" placeholder="可用数量"></el-input>
        </el-form-item>
        <el-form-item label="已领数量" prop="yiLing">
          <el-input v-model="dataForm.yiLing" placeholder="已领数量"></el-input>
        </el-form-item>
        <el-form-item label="已使用数" prop="yiYong">
          <el-input v-model="dataForm.yiYong" placeholder="已使用数量"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          name: localStorage.getItem('name'),
          mydis: {
            disId: '',
            name: '',
            type: '',
            tian: ''
          },
          types: ['手机', '生鲜', '家电'],
          disTypes: ['折扣卷', '满减卷'],
          baseUrl: 'http://localhost:8888/api',
          token: null,
          dataForm: {
            key: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
          visible: false,
          dataForm: {
            did: 0,
            dname: '',
            type: '',
            man: '',
            zhe: 0,
            bi: 0,
            dateCount: '',
            keYong: '',
            yiLing: '',
            yiYong: '',
            disType: ''
          },
          dataRule: {
            dname: [
              { required: true, message: '优惠券名称不能为空', trigger: 'blur' }
            ],
            type: [
              { required: true, message: '优惠券类型不能为空', trigger: 'blur' }
            ],
            man: [
              { required: true, message: '满额限制不能为空', trigger: 'blur' }
            ],
            zhe: [
              { required: true, message: '折扣金额不能为空', trigger: 'blur' }
            ],
            bi: [
              { required: true, message: '折扣比例不能为空', trigger: 'blur' }
            ],
            dateCount: [
              { required: true, message: '有效天数不能为空', trigger: 'blur' }
            ],
            keYong: [
              { required: true, message: '可用数量不能为空', trigger: 'blur' }
            ],
            yiLing: [
              { required: true, message: '已领数量不能为空', trigger: 'blur' }
            ],
            yiYong: [
              { required: true, message: '已使用数量不能为空', trigger: 'blur' }
            ]
          }
        }
      },
      watch: {

      },
      created() {
        this.token = localStorage.getItem("token")
        if (this.token == null) {
          alert("无权访问")
          location = './login.html'
        }
        this.getDataList();
      },
      //方法集合
      methods: {
        addMydis(data) {
          this.mydis.name = data.dname
          this.mydis.disId = data.did
          this.mydis.type = data.type
          this.mydis.tian = data.dateCount
          axios.post(`${this.baseUrl}/product/mydis/save`, this.mydis, {
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            alert(data.msg)
            this.getDataList();
          })
        },
        addOrUpdateHandle() {
          this.visible = true
          this.dataForm = {
            did: 0,
            dname: '',
            type: '',
            man: '',
            zhe: '',
            bi: '',
            dateCount: '',
            keYong: '',
            yiLing: '',
            yiYong: '',
            disType: ''
          }
        },
        // 表单提交
        dataFormSubmit() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              axios({
                url: `${this.baseUrl}/product/discount/${!this.dataForm.did ? 'save' : 'update'}`,
                method: 'post',
                data: {
                  'did': this.dataForm.did || undefined,
                  'dname': this.dataForm.dname,
                  'type': this.dataForm.type,
                  'man': this.dataForm.man,
                  'zhe': this.dataForm.zhe,
                  'bi': this.dataForm.bi,
                  'dateCount': this.dataForm.dateCount,
                  'keYong': this.dataForm.keYong,
                  'yiLing': this.dataForm.yiLing,
                  'yiYong': this.dataForm.yiYong,
                  'disType': this.dataForm.disType
                },
                headers: {
                  token: this.token
                }
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.getDataList();
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            }
          })
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          axios({
            url: `${this.baseUrl}/product/discount/list`,
            method: 'get',
            params: {
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': this.dataForm.key
            },
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
          this.dataListSelections = val
        },
        // 删除
        deleteHandle(id) {
          var ids = id ? [id] : this.dataListSelections.map(item => {
            return item.did
          })
          this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios({
              url: `${this.baseUrl}/product/discount/delete`,
              method: 'post',
              data: ids,
              headers: {
                token: this.token
              }
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
        }
      },
    })
  </script>
</body>

</html>